<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
			.a {
				width: 300px;
				height: 300px;
				background-color: hotpink;
				border-radius: 20px;
			}
			.yuanxing {
				width: 400px;
				height: 400px;
				border-radius: 50%;
				background-color: hotpink;
			}
			.juxing  {
				width: 400px;
				height: 200px;
				border-radius: 100px;
				background-color: skyblue;
			}
			.xiefa {
				width: 300px;
				height: 300px;
				background-color: green;
				border-radius: 20px 40px 10px 30px;
			}
			.dandu {
				width: 300px;
				height: 300px;
				background-color: yellow;
				border-top-left-radius: 40px;
				border-bottom-left-radius: 20px;
			}
		</style>
	</head>
	<body>
		圆角边框，所以是设置border属性，半径越大弧度越明显
		<div class="a"></div>
		<br>
		圆形设置radius为宽度的一半
		<div class="yuanxing"></div>
		<br>
		矩形设置radius为高度的一半
		<div class="juxing"></div>
		<br>
		四个角分别设置不同的圆角角度，顺序顺时针从左上开始
		四个角可以写2个，3个等值  2个是对角
		<div class="xiefa"></div>
		<br>
		单独写某个角的写法，注意top left不能改顺序  
		<div class="dandu"></div>
		
	</body>
</html>
